<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="../../style/layui-v2.5.6/layui/css/layui.css">
</head>
<style>
    h1{
        text-align: center;
    }
</style>
<body style="background: #FBFBFB">
    <h1>角色管理</h1>

    <%--   表格 --%>
    <div style="font-size: 10px">
        <table id="Role-tab" lay-filter="test"></table>
    </div>
    <script src="../../style/layui-v2.5.6/layui/layui.js"></script>
    <script type="text/javascript" src ="../../style/js/jquery-3.3.1.js"></script>
    <script>
        layui.use(['form','layer','table'], function () {
            var form = layui.form;
            var layer = layui.layer;//弹出层
            var table = layui.table;//表格

            table.render({
                elem: '#Role-tab'
                , height: 530
                , url: '../../Role/selRole.do' //数据接口
                ,skin:'line'//边框风格
                , page: true //开启分页
                , cols: [[ //表头
                    {checkbox: true},
                    {field: 'role_id', title: '角色ID', width: 100, sort: true}
                    ,{field: 'role_name', title: '角色名', width: 100, sort: true}
                    ,{field: 'menus', title: '权限', width: 500,templet:function(d){
                        var menus = d.menus;
                        var str="";
                        for(var i = 0; i < menus.length; i++){
                            str += menus[i].title + " / ";
                        }
                        return str;
                    }},
                ]]
            });

        });
    </script>
</body>
</html>
